<template>
  <div>
    <validator name="resetPwdForm">
      <form role="form" name="Form" class="col-md-4 col-md-offset-4 form-margin">
        <div class="form-group">
          <label>请输入您的新密码:</label>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" v-model="account.newPassword" id="newPassword" placeholder="输入新密码"  initial="off" detect-change="off" v-validate:new-password="{'required':true,'minlength':8}">
            <div>
              <error-template v-show="$resetPwdForm.newPassword.required">{{$resetPwdForm.newPassword.required}}</error-template>
              <error-template v-show="!$resetPwdForm.newPassword.required&&$resetPwdForm.newPassword.minlength">{{$resetPwdForm.newPassword.minlength}}</error-template>
            </div>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" v-model="account.rePassword" id="rePassword" placeholder="重复新密码"  initial="off" detect-change="off" v-validate:re-password="{'required':true,'repeat':account.newPassword}">
            <div>
              <error-template v-show="$resetPwdForm.rePassword.required">{{$resetPwdForm.rePassword.required}}</error-template>
              <error-template v-show="!$resetPwdForm.rePassword.required&&$resetPwdForm.rePassword.repeat">{{$resetPwdForm.rePassword.repeat}}</error-template>
            </div>
        </div>
        <div class="form-group">
          <button class="btn btn-primary form-control" v-on:click.prevent="resetPwd">下一步</button>
        </div> 
        <div class="form-group">
          <button class="btn btn-default form-control" v-on:click.prevent="goBack">返回</button>
        </div>
      </form>
    </validator>
  </div>
</template>
<script>
/**
 * @author guocailee
 */
import { resetPwdForget } from 'src/api/security.js'
export default {
  props: {
    account: {
      required: true,
      type: Object
    },
    state: {
      required: true,
      type: Object
    }
  },
  methods: {
    resetPwd() {
      let self = this
      this.$validate(() => {
        if (self.$resetPwdForm.invalid) {
          return
        }
        resetPwdForget(self.account)
        .then(data => self.$dispatch('setStep', 5))
        .catch(message => self.$notify.error(message))
      })
    },
    goBack() {
      this.$dispatch('setStep', 1)
    }
  },
  ready() {
  }
}
</script>